<template>
    <div class="swiper-container" ref="cur">
        <div class="swiper-wrapper">
            <!-- 轮播图的位置 -->
            <div class="swiper-slide" v-for="(carousel, index) in List" :key="index">
                <img :src="carousel.imgUrl">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
//引入swiper包
import Swiper from 'swiper'
export default {
    name: 'Carousel',
    props:['List'],
    watch: {
        //监听bannerList数据的变化，因为这条数据发生过变化--由空数组变为数组里面有四个元素
        List: {
            immediate: true,
            //通过watch监听bannerList属性值的变化，如果执行了handler则代表组件实例身上的这个属性值bannerList已经有了数据，
            //但是这个函数执行只能保证数据存在，并不能保证v-for已经执行完成，也就意味之不能保证页面结构完整
            handler(newValue, oldValue) {
                //nextTick：在下次DOM更新循环结束之后，执行延迟回调，在修改数据之后立即使用这个方法获取更新后的DOM元素
                this.$nextTick(() => {
                    //当执行nextTick的回调函数时，则保证服务器数据回来了，v-for执行完毕DOM结构完整，此时再去创建swiper实例
                    var mySwiper = new Swiper(this.$refs.cur, {
                        loop: true, // 循环模式选项

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })
                })
            }
        }
    }
}
</script>

<style></style>